<template>
  <div class="changebutton">
    <van-button
      :style="value == 1 ? actstyle : ''"
      class="change"
      :class="{ buttonactive: value === 1 }"
      color="linear-gradient(to right, #ffffff, #000000)"
      @click="toranking1()"
      >单科分数榜</van-button
    >
    <van-button
      :style="value == 2 ? actstyle : ''"
      class="change"
      :class="{ buttonactive: value === 2 }"
      color="linear-gradient(to right, #000000, #ffffff)"
      @click="toranking2()"
      >总分榜</van-button
    >
  </div>
</template>

<script>
export default {
  props() {
    value: Number;
  },
  data() {
    return {
      currentIndex: 0,
      index: 1,
      isactive: "",
      actstyle: {
        background: "white",
        color: "black",
      },
      value: 0,
    };
  },
  created() {},
  methods: {
    toranking1() {
      this.$router.push({ path: "/ranking_list" });
      this.value = 1;
    },
    toranking2() {
      this.$router.push({ path: "/ranking_list2" });
      this.value = 2;
    },
  },
};
</script>

<style>
.change {
  display: flex;
  width: 50%;
}
.changebutton {
  /* display: flex;
  text-align: center;
  width: 50%;
  height: 30px;
  margin-left: 25%; */
}
.buttonactive {
  font-size: 50px;
  font-weight: 300;
  color: blueviolet;
}
</style>